Tryit Editor v2.3

Edit This Code:
<!DOCTYPE html> <html> <head> <style> #myDIV { height: 250px; width: 400px; padding: 10px; margin: 15px; border: 5px solid red; background-color: lightblue; overflow: auto; } #myDIV2 { height: 250px; width: 400px; padding: 10px; margin: 15px; border: 5px solid red; background-color: lightblue; } #content { height: 800px; width: 2000px; background-color: lightyellow; } </style> </head> <body> <p>In this example, the child element (#content) inside the first div is bigger than div's height and width (the child is 800x2500 while its parent is 250x400), so we have added a scrollbar.</p> <p>Click the button to get the clientHeight, offsetHeight, clientWidth and offsetWidth of div.</p> <button onclick="myFunction()">Try it</button> <p>Notice how the scrollbar in the first div "steals" some of div's right and bottom padding, which results in a lower return value for clientHeight and clientWidth in that div, compared to the other one. The offsetHeight and offsetWidth is not affected by this.</p> <div id="myDIV"> <div id="content"></div> </div> <div id="myDIV2"> <div id="content2"></div> </div> <script> function myFunction() { var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "<b>Information about div1:</b><br>"; txt += "Height including padding: " + elmnt.clientHeight + "px<br>"; txt += "Height including padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>"; txt += "Width including padding: " + elmnt.clientWidth + "px<br>"; txt += "Width including padding, border and scrollbar: " + elmnt.offsetWidth + "px"; document.getElementById("content").innerHTML = txt; var elmnt2 = document.getElementById("myDIV2"); var txt2 = ""; txt2 += "<b>Information about div2:</b><br>"; txt2 += "Height including padding: " + elmnt2.clientHeight + "px<br>"; txt2 += "Height including padding and border: " + elmnt2.offsetHeight + "px<br>"; txt2 += "Width including padding: " + elmnt2.clientWidth + "px<br>"; txt2 += "Width including padding and border: " + elmnt2.offsetWidth + "px"; document.getElementById("content2").innerHTML = txt2; } </script> </body> <!-- Mirrored from www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_clientheight_offsetheight2 by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 23 Jan 2015 08:28:30 GMT --> </html>
Result:
Try it Yourself - © w3schools.com